<template>
  <div>
    <van-nav-bar title="搜索" left-text="返回" left-arrow @click-left="onClickLeft" />
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入查询的疾病症状"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <div>
      <van-empty description="暂无该内容相关信息" v-if="list.length<1" />
      <van-pull-refresh v-model="isLoading" offset="120" v-else>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="itemdisease" v-for="(item,index) in list" :key="index">
            <div class="name">{{item.name}}</div>
            <div class="ismedicalInsurance">是否纳入医保：{{item.medicalInsurance}}</div>
            <div class="scalias">
              俗称：
              <span v-for="(items,i) in item.alias" :key="i">{{items}}</span>
            </div>
            <div class="infectiousness">
              传染性：
              <span>{{item.infectiousness}}</span>
            </div>
            <div>
              症状：
              <span class="typicalSymptom">{{item.typicalSymptom}}</span>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>
<script>
import { Search, Empty, PullRefresh, List } from "vant";
export default {
  components: {
    [Search.name]: Search,
    [Empty.name]: Empty,
    [PullRefresh.name]: PullRefresh,
    [List.name]: List
  },
  data() {
    return {
      value: "",
      list: [],
      loading: false,
      isLoading: false,
      finished: false,
      refreshing: false,
      listQuery: {
        page: 1,
        pageSize: 15
      }
    };
  },
  created() {
    this.$store.commit("set_bottombar_visible", false);
  },
  methods: {
    onLoad() {
      if (this.value == "") {
        this.loading = true;
        return;
      }
      setTimeout(() => {
        this.getCardConsume(this.value);
        console.log("11111");
        this.loading = true;
      }, 500);
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.list = [];
        this.listQuery.page = 1;
        this.loading = false;
        this.finished = false;
        this.getCardConsume(this.value);
      }, 500);
    },
    onClickLeft() {
      //   this.$toast('返回');
      this.$router.go(-1);
      this.$store.commit("set_bottombar_visible", true);
    },
    onSearch(val) {
      if (!val) {
        this.$toast("输入内容不能为空！");
        return;
      }
      this.value = val;
      this.getCardConsume(val);
    },
    onCancel() {
      console.log("取消");
    },
    think() {
      //输入框内容变化时触发
      this.$toast("输入内容不能为空！");
    },
    async getCardConsume(value) {
      let isdata = {
        apiKey: "Ib3I1727eb283024b369d60868c8f7b3a719354fd552991",
        symptom: value,
        page: this.listQuery.page,
        pageSize: this.listQuery.pageSize
      };
      let res = await this.$axios.post(
        "/api/common/disease/queryDiseaseListBySymptom",
        isdata
      );
      if (res.statusCode == "000000") {
        this.loading = false;
        this.list = this.list.concat(res.result.diseaseList);
        this.listQuery.page++;
        if (this.list.length === res.result.totalCount) {
          this.finished = true;
        }
      }else{
          this.loading = false;
          this.$toast("已加载全部信息！");
      }
    }
  }
};
</script>
<style scoped lang="less">
/deep/ .van-nav-bar__content {
  background-color: #0d9df0;
}
/deep/ .van-nav-bar .van-icon {
  color: #ffffff;
}
/deep/ .van-nav-bar__text {
  color: #ffffff;
}
/deep/ .van-nav-bar__title {
  color: #ffffff;
}
.itemdisease {
  font-size: 16px;
  border-bottom: solid 1px #9fd8f9;
  padding: 10px 8px;
  color: #000000;
  .name {
    font-weight: bold;
  }
  .scalias {
    span {
      color: #999999;
    }
  }
  .typicalSymptom {
    color: #999999;
  }
}
</style>